<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <h3 style="text-align: center">模型库</h3>
  <div class="analysis-page">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="模型分类" name="1">
        <div id="ModelChart1" style="width: 100%;height: 300px;"></div>
      </el-tab-pane>
      <el-tab-pane label="载荷情况" name="2">
        <div id="ModelChart2" style="width: 100%;height: 300px;"></div>
      </el-tab-pane>
      <el-tab-pane label="模型范围" name="3">
        <div id="ModelChart3" style="width: 100%;height: 300px;"></div>
      </el-tab-pane>
      <el-tab-pane label="业务场景" name="4">
        <div id="ModelChart4" style="width: 100%;height: 300px;"></div>
      </el-tab-pane>
      <el-tab-pane label="来源方式" name="5">
        <div id="ModelChart5" style="width: 100%;height: 300px;"></div>
      </el-tab-pane>
    </el-tabs>
    
  </div>
</template>

<script setup>
// import * as VChart from '@visactor/vchart';
import VChart from '@visactor/vchart';
// VTable.register.chartModule('vchart', VChart);
import { getModelAllByEnumType, getMaterialParamStatistics } from '@/api/statisticalAnalysis';
const activeName = ref('1');
const CONTAINER_ID = ref('ModelChart1');
const chartShow = true;
const chartData = ref([]);
const pieDataList = ref([])
const handleClick = () => {
  nextTick(() => {
    if(activeName.value === '2'){
      CONTAINER_ID.value = 'ModelChart2';
      renderChartPie(pieDataList.value[0], 'ModelChart2');
    } else if(activeName.value === '3'){
      CONTAINER_ID.value = 'ModelChart3';
      renderChartPie(pieDataList.value[1], 'ModelChart3');    
    } else if(activeName.value === '4'){
      CONTAINER_ID.value = 'ModelChart4';
      renderChartPie(pieDataList.value[2], 'ModelChart4');    
    } else if(activeName.value === '5'){
      CONTAINER_ID.value = 'ModelChart5';
      renderChartPie(pieDataList.value[3], 'ModelChart5');    
    }
  });
  
}
const renderChartPie = (dataObj, id) => {
  const spec = {
    type: 'pie',
    data: dataObj,
    outerRadius: 0.8,
    innerRadius: 0.5,
    padAngle: 0.6,
    valueField: 'totalCount',
    categoryField: 'title',
    pie: {
      style: {
        cornerRadius: 10
      },
      state: {
        hover: {
          outerRadius: 0.85,
          stroke: '#000',
          lineWidth: 1
        },
        selected: {
          outerRadius: 0.85,
          stroke: '#000',
          lineWidth: 1
        }
      }
    },
    legends: {
      visible: true
    },
    label: {
      visible: true,
      formatMethod: (label, data) => {
        return {
          type: 'rich',
          text: [
            {
              text: `${data.totalCount}%\n`,
              fill: 'rgba(0, 0, 0, 0.92)',
              fontSize: 16,
              fontWeight: 500,
              stroke: false
            },
            {
              text: data.title,
              fill: 'rgba(0, 0, 0, 0.55)',
              fontSize: 12,
              fontWeight: 400,
              stroke: false
            }
          ]
        };
      },
      style: {
        wordBreak: 'break-word',
        maxHeight: 50
      }
    },
    tooltip: {
      mark: {
        content: [
          {
            key: datum => datum['type'],
            value: datum => datum['totalCount'] + '%'
          }
        ]
      }
    }
  };
  const vchart = new VChart(spec, { dom: id });
  vchart.renderSync();

  // Just for the convenience of console debugging, DO NOT COPY!
  window['vchart'] = vchart;
}
const renderChart = (data) => {
  const values = data;
  // const values = [
  // { model: 'ARJ21', title: '.xlsx', totalCount: 11 },
  //   { model: 'ARJ21', title: '.txt', totalCount: 5 },
  //   { model: 'ARJ21', title: '.gif', totalCount: 9 },
  //   { model: 'ARJ21', title: '.bdf', totalCount: 2 },
  // ];
  const series = Array.from(new Set(values.map(v => v.title)));
  const spec = {
    type: 'bar',
    data: {
      values
    },
    // xField: ['model', 'title'],
    // yField: 'totalCount',
    // seriesField: 'title ',
    xField: ['model', 'title'],
    yField: 'totalCount',
    seriesField: 'title',
    animationAppear: {
      duration: 500, // 每个柱子的动画时长为 500ms
      delay: (datum, element, ctx, params) => {
        const seriesIndex = series.findIndex(s => s === datum.title);
        return seriesIndex * (500 + 50); // 柱子延迟为 500ms（之前柱子的动画时长）+ 50ms（动画间隔时间）
      }
    },
    legends: [{ visible: true, position: 'middle', orient: 'bottom' }],
    axes: [
      {
        orient: 'left',
        label: {
          formatMethod(val) {
            return `${val}`;
          }
        }
      }
    ]
  };

  const vchart = new VChart(spec, { dom: CONTAINER_ID.value });

  vchart.renderSync();
}
const getModelTypeData = async () => {
  let option1 = await getModelAllByEnumType('model_type');
  let option2 = await getModelAllByEnumType('load_conditions');
  let option3 = await getModelAllByEnumType('model_scope');
  let option4 = await getModelAllByEnumType('business_scenarios');
  let option5 = await getModelAllByEnumType('source_methods');
  Promise.all([option1, option2, option3, option4, option5]).then(res => {
    chartData.value = res[0].data;
    pieDataList.value = [ {
      id: 'id0',
      values: res[1].data
    },
    {
      id: 'id0',
      values: res[2].data
    },
    {
      id: 'id0',
      values: res[3].data
    },
    {
      id: 'id0',
      values: res[4].data
    }]
    renderChart(chartData.value);
  });
}
getMaterialParamStatistics().then(res => {
  console.log(res);
}); 
onMounted(() => {
  getModelTypeData();                           
});                                                                                   
                                                         
</script>

<style lang="scss" scoped>

</style>